<template>
    <Modal width='800' :styles='{top:"20px"}' v-model="showModal" title="图片上传管理器" :closable="true" :mask-closable="false"
           @on-ok="selectedImage" @on-cancel="cancelImage">
        <Row>
            <Col span="6">
            <Upload :action="getUrl('/home/file/add')"
                    :on-success="handleAddSuccess"
                    :format="['jpg','jpeg','png']"
                    multiple
                    type="drag"
                    :max-size="2048"
                    :show-upload-list="false"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :headers="uploadHeaders()">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将文件拖拽到这里上传</p>
                </div>
            </Upload>
            </Col>
        </Row>

        <hr style="margin-top: 20px;border-top: 1px solid #e3e8ee;border-bottom: 0"/>

        <Row style="margin-top: 20px">
            <Col :span="4" style="text-align: center;float: left" v-for="(item,index) in file" :key="index">
            <img style="width: 120px;height: 120px;border: 1px solid #e3e8ee;padding: 3px;border-radius: 3px;"
                 @click="selectImage(item)" v-lazy="getFile(item)">
            <div @click="selectImage(item)" v-show="selected.id==item.id"
                 style="line-height: 128px;position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);cursor: pointer;font-size: 16px">
                <Icon type="checkmark-circled" size="20" color="#fff"></Icon>
                <span style="color: #fff">已选择</span>
            </div>
            </Col>
        </Row>

        <Row>
            <template>
                <Page :total="pagination.rowCount" :current="pagination.page" show-elevator
                      :page-size="pagination.pageSize" style="float: right;margin: 10px"
                      @on-change="changePage"></Page>
            </template>
        </Row>
    </Modal>
</template>

<script>
    import axios from 'axios';
    export default {
        data(){
            return {
                selected: {
                    id: 0
                },
                file: [],
                pagination: {
                    page: 1,
                    pageCount: 0,
                    pageSize: 0,
                    rowCount: 0
                },
                showModal: false
            }
        },

        props: {
            show: {
                default: false
            },
            fileUrl: {
                default: '/home/file/index'
            }
        },

        watch: {
            show(newVal, oldVal){
                this.showModal = newVal;
                this.selected = {
                    id: 0
                }
                if(this.showModal){
                    this.search();
                }
            }
        },

        created(){
            // this.search();
        },

        methods: {

            selectImage(item) {
                if (item.id == this.selected.id) {
                    this.selected = {
                        id: 0
                    };
                    return;
                }
                this.selected = item;
            },

            cancelImage(){
                this.$emit('on-cancel', true);
            },

            selectedImage(){
                this.$emit('on-selected', this.selected);
            },

            changePage(page) {
                this.pagination.page = page;
                this.search();
            },

            search() {
                this.fetch(`${this.fileUrl}?page=${this.pagination.page}`).then((res) => {
                    if (res && res.data.data) {
                        this.file = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },

            handleAddSuccess(res, file) {
                this.search();
            }
        }
    }
</script>

<style>
    .ivu-modal-content {
        border-radius: 0;
    }
</style>